import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Pages
import Fk.RoomElement

      // Component.onCompleted: {
      //   console.log(servant)
      // }

GraphicsBox { // 背景框
  id: root
  property var servants: []
  property int number
  property var selected: []

  title.text: Backend.translate("$ChooseServants")
  width: 500
  height: 380

  Component { // 随从组件
    id: generalDelegate

    Item { // 组件主体
      id: main
      width: 216
      height: 110
      signal rightClicked()
      property var servant: modelData[0]
      property var cost: modelData[1]
      property string type: "active"
      property bool pressed: false
      
      onEnabledChanged: {
        if (!enabled)
          pressed = false;
      }

      onRightClicked: { // 右键弹窗显示从者信息
        roomScene.startCheat("GeneralDetail", { generals: [servant] });
      }
      
      onPressedChanged: {
        if (pressed) {
          root.selected.push([this.servant, this.cost]);
        } else {
          root.selected.splice(root.selected.findIndex(item => item[0] === servant), 1);
        }

        root.updateSelectable();
      }

      Image { // 随从背景图
        anchors.fill: parent
        source: "images/exchangeWin.png"

        Image { // 随从头像
          width: 64
          height: 64
          x: parent.x + 15
          y: parent.y + 20
          source: SkinBank.getGeneralExtraPic(servant, "avatar/")
                  ?? SkinBank.getGeneralPicture(servant)
          property bool useSmallPic: !!SkinBank.getGeneralExtraPic(servant, "avatar/")
          sourceClipRect: useSmallPic ? undefined : Qt.rect(61, 0, 128, 128)

          Rectangle { // 头像框
            anchors.fill: parent
            color: "transparent"
            border.width: 1
          }
        }

        Text { // 随从名称
          x: parent.x + 120
          y: parent.y + 28
          font.pixelSize: 12
          text: Backend.translate(servant)
          font.family: "Microsoft YaHei"
        }

        Image { // 元宝图片
          id: simple
          x: parent.x + 94
          y: parent.y + 45
          width: 40
          height: 40
          source: "images/ingots.png"
        }

        Text { // Cost
          anchors.horizontalCenter: simple.horizontalCenter
          anchors.top: simple.bottom
          font.pixelSize: 12
          font.family: "Arial"
          font.bold: true
          color: "black"
          text: cost
        }
        
        Image {
          width: 50
          x: parent.x + 145
          y: parent.y + 62
          opacity: main.pressed ? 1 : 0
          source: "images/chosen.png"
        }
        // MetroButton { // 招募！
        //   width: 50
        //   x: parent.x + 145
        //   y: parent.y + 62
        //   Layout.fillWidth: true
        //   text: Backend.translate("$conscript")
        //   enabled: cost <= number

        //   onClicked: {
        //     close();
        //     roomScene.state = "notactive";
        //     ClientInstance.replyToServer("", JSON.stringify(modelData));
        //   }
        // }
      }

      TapHandler { // 赋予右键效果的东西
        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.NoButton
        gesturePolicy: TapHandler.WithinBounds

        onTapped: (p, btn) => {
          if (btn === Qt.LeftButton || btn === Qt.NoButton) {
            parent.pressed = !parent.pressed;
          } else if (btn === Qt.RightButton) {
            parent.rightClicked();
          }
        }

        onLongPressed: {
          parent.rightClicked();
        }
      }
    }
  }

  Flickable { // 可滑动的框
    id: flickableContainer

    flickableDirection: Flickable.VerticalFlick
    anchors.fill: parent
    anchors.topMargin: 35
    anchors.leftMargin: 5
    anchors.rightMargin: 5
    anchors.bottomMargin: 50

    contentWidth: parent.width
    contentHeight: generalArea.height
    clip: true

    GridLayout { // 布局？
      id: generalArea
      columns: 2
      anchors.horizontalCenter: parent.horizontalCenter

      Repeater { // 重复调用随从组件
        id: to_select
        model: servants
        delegate: generalDelegate
      }
    }
  }

  MetroButton {
    width: 100
    anchors.rightMargin: 35
    anchors.bottomMargin: 8
    anchors.right: root.right
    anchors.bottom: root.bottom
    Layout.fillWidth: true
    text: luatr("OK")
    id: buttonConfirm

    onClicked: {
      close();
      roomScene.state = "notactive";
      ClientInstance.replyToServer("", JSON.stringify(root.selected));
    }
  }

  // MetroButton { // 取消
  //   width: 100
  //   anchors.rightMargin: 2
  //   anchors.bottomMargin: 8
  //   anchors.right: buttonConfirm.left
  //   anchors.bottom: root.bottom
  //   Layout.fillWidth: true
  //   text: Backend.translate("Cancel")

  //   onClicked: {
  //     close();
  //     roomScene.state = "notactive";
  //     ClientInstance.replyToServer("", JSON.stringify("Cancel"));
  //   }
  // }

  Image { // 元宝图片
    id: wealth
    anchors.leftMargin: 35
    anchors.bottomMargin: 2
    anchors.left: root.left
    anchors.bottom: root.bottom
    width: 40
    height: 40
    source: "images/ingots.png"
  }

  Text { // 提示
    id: prompt
    anchors.bottomMargin: 8
    anchors.left: wealth.right
    anchors.bottom: root.bottom
    font.pixelSize: 20
    color: "white"
    text: Backend.translate("$YouPossess")
  }

  Text { // 数字
    id: num
    anchors.bottomMargin: 8
    anchors.left: prompt.right
    anchors.bottom: root.bottom
    font.pixelSize: 20
    color: "white"
    text: number
  }

  Text { // 提示
    anchors.bottomMargin: 8
    anchors.left: num.right
    anchors.bottom: root.bottom
    font.pixelSize: 20
    color: "white"
    text: Backend.translate("ingots")
  }

  function updateSelectable() {
    let i = 0;
    root.selected.map(item => i = i + item[1]);
    buttonConfirm.enabled = (number >= i);
  }

  function loadData(data) {
    [servants, number] = data
  }
}
